<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Magic Compass Alipay Barcode Merchant Demo</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#payWithAlipayButton').on('click', function (e) {
		$("#paymentType").val="alipayBarcode";
		$("#selectPaymentForm").submit();
	});
	$('#payWithWechatButton').on('click', function (e) {
		$("#paymentType").val="wechat";
		$("#selectPaymentForm").submit();
	});
});

</script>
</head>
<body>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Select Payment Page</h1>
	</div>
	<br><br><br>
	<div class="page-header">
		<h3 class="text-center">Purchase Summary</h3>
	</div>
	<br>
	<c:url var="saveUrl" value="/alipayBarcodePaymentController/" />
	<form:form modelAttribute="merchantInputProductPageForm" method="POST" id="selectPaymentForm" action="${saveUrl}">
		<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr>
			        <td class="lead">Product Name</td>
			        <td class="text-right lead">Price</td>
			        <td class="text-center lead">Quantity</td>
			        <td class="text-right lead">Total</td>
		        </tr>
	        </thead>
	        <tbody>
		        <c:forEach var="aProduct" items="${merchantInputProductPageForm.productList4Page}" varStatus="rowCount">
		        <tr>
		            <td>${aProduct.productName}</td>
		            <td class="text-right">${aProduct.productPrice}</td>
		            <td class="text-center">${aProduct.quantity}</td>
		            <td class="text-right">${aProduct.rowTotalAmount}</td>
		        </tr>
		        </c:forEach>
		        <tr>
		            <td colspan="3">&nbsp;Total:</td>
		            <td class="text-right">
		            	${merchantInputProductPageForm.totalPrice}
		            	<input type="hidden" id="totalAmt" name="totalAmt" value="${merchantInputProductPageForm.totalPrice}">
		            	<input type="hidden" id="mtId" name="mtId" value="${merchantInputProductPageForm.merchantTransactionId}">
		            	<input type="hidden" id="paymentType" name="paymentType" value="">
		            </td>
		        </tr>
	        </tbody>            
	    </table>
		<br>
	    <div class="row">
	    	<div class="col-md-4">
	    		<button type="button" class="btn btn-primary btn-lg btn-block" name="PayWithAlipayButton" id="payWithAlipayButton">Pay with ALIPAY</button>
	    	</div>
			<div class="col-md-4">
				&nbsp;
			</div>
			<div class="col-md-4">
				<button type="button" class="btn btn-primary btn-lg btn-block disabled" name="payWithWechatButton" id="payWithWechatButton">Pay with Wechat</button>
			</div>
		</div>
	</form:form>
</div>
</body>
</html>